{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>上传教学资源</h2>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-ppt-tab" data-bs-toggle="tab" data-bs-target="#nav-ppt" type="button" role="tab">PPT课件</button>
                <button class="nav-link" id="nav-lesson-tab" data-bs-toggle="tab" data-bs-target="#nav-lesson" type="button" role="tab">教案</button>
                <button class="nav-link" id="nav-schedule-tab" data-bs-toggle="tab" data-bs-target="#nav-schedule" type="button" role="tab">教师课表</button>
            </div>
        </nav>
        
        <div class="tab-content" id="nav-tabContent">
            <!-- PPT上传 -->
            <div class="tab-pane fade show active" id="nav-ppt" role="tabpanel">
                <div class="card mt-3">
                    <div class="card-body">
                        <form id="pptForm">
                            <div class="mb-3">
                                <label class="form-label">年级</label>
                                <select class="form-select" name="grade" required>
                                    <option value="">选择年级</option>
                                    {% for grade in ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三'] %}
                                    <option value="{{ grade }}">{{ grade }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">学期</label>
                                <select class="form-select" name="semester" required>
                                    <option value="">选择学期</option>
                                    <option value="上">上学期</option>
                                    <option value="下">下学期</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">上传者</label>
                                <input type="text" class="form-control" name="uploader" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">PPT文件</label>
                                <input type="file" class="form-control" name="file" accept=".ppt,.pptx" required>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">上传PPT</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 教案上传 -->
            <div class="tab-pane fade" id="nav-lesson" role="tabpanel">
                <div class="card mt-3">
                    <div class="card-body">
                        <form id="lessonForm">
                            <div class="mb-3">
                                <label class="form-label">年级</label>
                                <select class="form-select" name="grade" required>
                                    <option value="">选择年级</option>
                                    {% for grade in ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三'] %}
                                    <option value="{{ grade }}">{{ grade }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">学期</label>
                                <select class="form-select" name="semester" required>
                                    <option value="">选择学期</option>
                                    <option value="上">上学期</option>
                                    <option value="下">下学期</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">上传者</label>
                                <input type="text" class="form-control" name="uploader" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">教案文件</label>
                                <input type="file" class="form-control" name="file" accept=".doc,.docx,.pdf,.txt" required>
                            </div>
                            
                            <button type="submit" class="btn btn-success">上传教案</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 课表上传 -->
            <div class="tab-pane fade" id="nav-schedule" role="tabpanel">
                <div class="card mt-3">
                    <div class="card-body">
                        <form id="scheduleForm">
                            <div class="mb-3">
                                <label class="form-label">教师姓名</label>
                                <input type="text" class="form-control" name="teacher_name" required>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">上传方式</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="upload_type" value="file" checked>
                                    <label class="form-check-label">上传图片文件</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="upload_type" value="table">
                                    <label class="form-check-label">填写表格</label>
                                </div>
                            </div>
                            
                            <div class="mb-3" id="fileUploadSection">
                                <label class="form-label">课表图片</label>
                                <input type="file" class="form-control" name="file" accept="image/*">
                            </div>
                            
                            <div class="mb-3" id="tableInputSection" style="display: none;">
                                <label class="form-label">课表内容</label>
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="scheduleTable">
                                        <thead>
                                            <tr>
                                                <th>时间/星期</th>
                                                <th>周一</th>
                                                <th>周二</th>
                                                <th>周三</th>
                                                <th>周四</th>
                                                <th>周五</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for period in ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节', '第七节', '第八节'] %}
                                            <tr>
                                                <td>{{ period }}</td>
                                                {% for day in range(5) %}
                                                <td contenteditable="true"></td>
                                                {% endfor %}
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <input type="hidden" name="table_content" id="tableContent">
                            </div>
                            
                            <button type="submit" class="btn btn-info">上传课表</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 切换上传方式
document.querySelectorAll('input[name="upload_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const fileSection = document.getElementById('fileUploadSection');
        const tableSection = document.getElementById('tableInputSection');
        
        if (this.value === 'file') {
            fileSection.style.display = 'block';
            tableSection.style.display = 'none';
            fileSection.querySelector('input').required = true;
        } else {
            fileSection.style.display = 'none';
            tableSection.style.display = 'block';
            fileSection.querySelector('input').required = false;
        }
    });
});

// 表单提交处理
document.getElementById('pptForm').addEventListener('submit', handleFormSubmit);
document.getElementById('lessonForm').addEventListener('submit', handleFormSubmit);
document.getElementById('scheduleForm').addEventListener('submit', handleScheduleSubmit);

function handleFormSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const fileType = form.id === 'pptForm' ? 'ppt' : 'lesson_plan';
    formData.append('file_type', fileType);
    
    axios.post('/api/upload', formData)
        .then(response => {
            if (response.data.success) {
                alert('上传成功！');
                form.reset();
            } else {
                alert('上传失败：' + response.data.message);
            }
        })
        .catch(error => {
            alert('上传出错：' + error.message);
        });
}

function handleScheduleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    
    const uploadType = document.querySelector('input[name="upload_type"]:checked').value;
    if (uploadType === 'table') {
        // 收集表格内容
        const table = document.getElementById('scheduleTable');
        const tableHTML = table.outerHTML;
        formData.append('table_content', tableHTML);
    }
    
    axios.post('/api/upload_schedule', formData)
        .then(response => {
            if (response.data.success) {
                alert('课表上传成功！');
                form.reset();
            } else {
                alert('上传失败：' + response.data.message);
            }
        })
        .catch(error => {
            alert('上传出错：' + error.message);
        });
}
</script>
{% endblock %}
